<template>
  <div class="management">
    <el-button size="mini" type="primary" @click="handlerAdd()">新增</el-button>
    <div class="contant">
      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
        :header-cell-style="{background:'#e5e5e5',color:'#000'}">

        <el-table-column prop="deviceId" label="设备ID" />
        <el-table-column prop="nodeId" label="设备标识" />
        <el-table-column prop="ip" label="IP地址" />
        <el-table-column prop="port" label="端口" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="password" label="密码" />

        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="{row,$index}">
            <el-button size="mini" type="primary" @click="handlerUpdate(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <pagination v-show="pagination.total>0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
      </div>
    </div>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
      <el-form ref="form" :model="form" label-width="100px" :inline="false" size="small" :rules="rules">
        <el-form-item label="设备ID" prop="deviceId">
          <el-input v-model="form.deviceId" clearable />
        </el-form-item>
        <el-form-item label="设备标识" prop="nodeId">
          <el-input v-model="form.nodeId" clearable />
        </el-form-item>
        <el-form-item label="IP" prop="ip">
          <el-input v-model="form.ip" clearable />
        </el-form-item>
        <el-form-item label="port" prop="port">
          <el-input v-model="form.port" clearable />
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" clearable />
        </el-form-item>
      </el-form>
      <div style="text-align:right">
        <el-button type="primary" @click="handlerSave" size="small">保存</el-button>
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import * as shellApi from '@/api/link/deviceShell'

export default {
  comments: {},
  props: {},
  data() {
    return {
      title: '',
      dialogVisible: false,
      form: {},
      multipleSelection: [],
      tableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      }
    }
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight
      return curHeight - 280
    }
  },
  created() {
    this.getPageList()
  },
  mounted() {
  },
  methods: {
    // 复选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getPageList() {
      this.search()
    },
    search() {
      const p = Object.assign({}, this.pagination)
      shellApi.page(p).then(resp => {
        this.tableData = resp.data.list
        this.pagination = resp.data.pagination
        this.pagination.page = resp.data.pagination.current
      })
    },
    handlerAdd() {
      this.title = '新增'
      this.dialogVisible = true
      this.form = {}
    },
    handlerUpdate(row) {
      this.title = '修改'
      this.dialogVisible = true
      console.log(row)
      this.form = row
    },
    handlerSave() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id) {
            shellApi.update(this.form).then(resp => {
              this.dialogVisible = false;
              this.getPageList();
            });
          } else {
            shellApi.save(this.form).then(resp => {
              this.dialogVisible = false;
              this.getPageList();
            });
          }
        }
      });
    }
  },
}
</script>

<style scoped lang="scss">
.management {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
